<div class="content">

    <div class="header">
        <div class="inputContainer" nz-row>
            <div class="input" nz-col nzSpan="22">
                <nz-input-group [nzSuffix]="suffixIconSearch">
                    <input style="background-color: #353c70 !important; color: #7B82B8;" type="text" nz-input placeholder="Search for keyword..." [(ngModel)]="keyword"
                        (keyup)="onSearch()" />
                </nz-input-group>
                <ng-template #suffixIconSearch>
                    <i nz-icon type="search"></i>
                </ng-template>
            </div>
            <!-- <div class="input" nz-col nzSpan="10">
                <nz-select style="width: 100%;" [(ngModel)]="selectedValue" nzAllowClear
                           nzPlaceHolder="Select Event Type">
                    <nz-option nzValue="accident" nzLabel="ACCIDENT"></nz-option>
                    <nz-option nzValue="sandStorm" nzLabel="SAND STORM"></nz-option>
                    <nz-option nzValue="congestion" nzLabel="CONGESTION"></nz-option>
                </nz-select>
            </div> -->
        </div>
    </div>

    <div class="table" nz-col nzSpan="22" id="drag">
        <nz-table #headerTable [nzData]="listOfData" [nzPageSize]="listOfData.length" [nzShowPagination]="false"
            [nzScroll]="{ y: '1.5rem' }">
            <thead>
                <tr class="tableHead">
                    <th style="background-color: #2c3054; color: white; width: 20%;text-align: center; " >{{"DisseminationManagement.MessageLibrary.Icon"
                        | translate}}</th>
                    <th style="background-color: #2c3054; color: white;width: 60%;text-align: center; box-sizing: border-box;padding-left: 30px; ">{{"DisseminationManagement.MessageLibrary.Name"
                        | translate}}</th>
                    <th style="background-color: #2c3054; color: white;width: 20%;text-align: center;box-sizing: border-box;padding-left: 30px; "></th>
                </tr>
            </thead>
            <tbody cdkDropList [cdkDropListConnectedTo]="addService.cdkDropListConnectId" id="graphicsContainer">
                <tr *ngFor="let data of headerTable.data" cdkDrag (mousedown)="clickTR(data)" style="width: 100%;">
                    <td style="width: 20%;text-align: center;box-sizing: border-box;padding-left: 30px;">
                        <img [src]="data.url" alt="" style="width: 0.4rem;height:0.4rem;">
                        <img [src]="data.url" alt="" style="width: 0.4rem;height:0.4rem;" *cdkDragPreview>
                    </td>

                    <td style="width: 60%;text-align: center;box-sizing: border-box;padding-left: 30px;" >{{ data.name }}</td>

                    <td style="width: 20%; text-align: center;box-sizing: border-box;padding-left: 30px;">
                        <i class="iconfont icon-capture-screen" style="color: #238CE6;font-size: 0.26rem;"></i>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>
</div>